<template>
    <div class="home_set">
        <h3 class="home_title">HOME 主页信息维护</h3>
        <div class="table_box">
            <el-table
                :data="homeList"
                stripe
                style="width: 100%"
                border
            >
                <el-table-column
                    prop="name"
                    label="功能名称"
                    width="180">
                    <template slot-scope="scope">
                        <el-tag type="primary" disable-transitions>{{scope.row.name}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="content"
                    label="功能内容"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="id"
                    label="序号">
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="创建时间">
                </el-table-column>
                <el-table-column
                    prop="updateTime"
                    label="更新时间">
                </el-table-column>
                <el-table-column label="功能编辑">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog title="首页信息编辑" :visible.sync="dialogFormVisible">

            <el-form :model="form">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="功能名称" :label-width="formLabelWidth">
                            <el-input disabled v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="功能内容" :label-width="formLabelWidth">
                            <el-input v-model="form.content" type="textarea" :rows="2" placeholder="请输入内容" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="序号" :label-width="formLabelWidth">
                            <el-input v-model="form.id"  autocomplete="off" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="创建时间" :label-width="formLabelWidth">
                            <el-input v-model="form.createTime" autocomplete="off" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item v-for="(item, i) in form.list" :label="`图片地址${i+1}:`" :label-width="formLabelWidth" :key="i">
                    <el-input v-model="item.imgUrl" type="textarea" :rows="3" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleSubmit">确 定</el-button>
                </div>
            </el-dialog>
    </div>
</template>

<script>
import $http from '@/http/api';

export default {
    data() {
        return {
            homeList: [],
            copyHomeList: [],
            dialogFormVisible: false,
            selectItem: null,
            form: {
                name: '',
                content: '',
                id: 0,
                createTime: 0,
                updateTime: 0,
                list: []
            },
            formLabelWidth: '100px'
        }
    },
    mounted() {
        this.getHomeList()
    },
    methods: {
        async getHomeList() {
            const res = await $http.bannerList();
            this.homeList = res.data;
        },
        handleEdit(index, item) {
            this.form = item;
            this.dialogFormVisible = true;
        },
        async handleSubmit() {
            const { errorCode } = await $http.EditBannerList(this.form);
            if (errorCode === "0000") {
                const res= await $http.bannerList();
                if (res.errorCode === '0000') {
                    this.$message({ type: "success", message: "操作成功" });
                    this.dialogFormVisible = false
                }
            } else {
                 this.$message({ type: "error", message: "操作失败" });
            }
        }
    }
}
</script>

<style lang="less" scoped>
.home_set {
    background: #fff;
    min-height: 80vh;
    .home_title {
        padding: 10px 0 0 20px;
    }
}
.table_box {
    width: 1200px;
    margin: auto;
    padding-top: 30px;
}
.home_set /deep/ tr > th {
    text-align: center;
}
.home_set /deep/ tr > td {
    text-align: center;
}
</style>